<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>角色管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/ztree/css/demo.css" type="text/css">
	<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	
<!-- ztree的js和css -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/assets/ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/ztree/js/jquery.ztree.exedit.js"></script>
<style type="text/css">
div, th, td{
	vertical-align:middle;
}
</style>
</head>
<body>
	<div class="demoTable" style="padding:10px 0 0 15px">
    	<div class="layui-inline">
        	<input class="layui-input" name="keyWord" id="keyWord" placeholder="请输入角色名称" autocomplete="off">
    	</div> &nbsp; &nbsp; &nbsp; &nbsp;
    	<button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">  搜索</i></button>
	</div>
	
	
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<div id="formDiv" hidden>
	<form class="layui-form" id="addform">
		<input type="hidden" id="rid" name="rid">
		<input type="hidden" id="createTime" name="createTime">
		<br>
		<div class="layui-form-item">
			<div class="layui-inline">
		      <label class="layui-form-label" style="margin-left: 50px;">角色名称</label>
		      <div class="layui-input-inline">
		        <input lay-verify="name" onfocus="editValue()" class="layui-input" type="text" id="name" name="name" style="width:200px">
		      </div>
		    </div>
			<div class="layui-inline">
				<font style="color:red; font-size: 24px;">*</font>
		    </div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-inline">
		      <label class="layui-form-label" style="margin-left: 50px;">角色描述</label>
		      <div class="layui-input-inline">
		        <input lay-verify="descride" class="layui-input" type="text" id="descride" name="descride" style="width:200px">
		      </div>
		    </div>
		</div>
		<button class="layui-btn layui-btn-blue" id="submit2" lay-submit lay-filter="addform" style="margin-left:140px">立即提交</button>&emsp;&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</form>
</div>

<!-- 授权的表单 -->
 <div id="formDiv2" hidden>
	<form class="layui-form" id="subform">
		<input  id="rid" name="rid" type="hidden">  	
		<label class="layui-form-label">权限</label>
		<div class="layui-input-inline" style="width:300px;margin-bottom: 15px;">
			<ul class="ztree" id="ztree"></ul>
		</div><br>
		<button class="layui-btn layui-btn-blue" id="submit2" lay-submit lay-filter="subform" style="margin-left:140px">提交</button>
		&emsp;&emsp;&emsp;&emsp;<button type="button" id="clear" class="layui-btn layui-btn-primary">重置</button>
	</form>
</div> 


<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-blue" lay-event="add"><i class="layui-icon layui-icon-add-1">  新增</i></button>
		<button class="layui-btn layui-btn-blue" lay-event="delete"><i class="layui-icon layui-icon-delete">批量删除</i></button>
	</div>
</script>
 
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="accredit">授权</a>	
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
<%-- <script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script> --%>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>

<script>

layui.use(['table','layer','upload','form','laydate'], function(){
	var table = layui.table;
	var layer = layui.layer;
	var laydate = layui.laydate;
    var form = layui.form;
	
  //执行一个laydate实例
	laydate.render({
		elem: '#createTime', //指定元素
		type: 'date'
	});
  
	var $ = layui.jquery, active = {
			reload:function () {
				var name = $("#keyWord").val();
				table.reload('contenttable',{
					method:'get',
					where:{name: name},
					page:{
						curr:1  //重新从第一页开始
					}
				}); 
			}
		}
	$('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
	table.render({
	    elem: '#test'
	    ,url:'${pageContext.request.contextPath }/roleMana/listPageRole.do'
	    ,toolbar: '#toolbarDemo'
	    ,title: '角色管理'
	    ,id :'contenttable'
	    ,limits:[10,20,30]
	    ,cols: [[
	    	{type: 'checkbox', fixed: 'left'}
	    	,{field:'', title:'序号', sort: true, type:'numbers', width: 60}
	      	,{field:'name', title:'角色名称'}
	      	,{field:'descride', title:'角色描述'}
	      	,{field:'createTime', title:'创建时间'}
	      	,{fixed: 'right', title:'操作',  width: 200, toolbar: '#barDemo'}
	    ]]
	    ,page: true
	});
  
	//头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	    	case 'add':
	    		layer.open({
					  type: 1 		//Page层类型
					  ,area: ['500px', '300px'] //宽  高
					  ,title: '新增'
					  ,shade: 0.1 	//遮罩透明度
					  ,shadeClose: true //点击遮罩关闭
					  ,maxmin: true //允许全屏最小化
					  ,anim: 1 		//0-6的动画形式，-1不开启
					  ,content: $('#formDiv')
					  ,success: function () {
						  document.getElementById("addform").reset();
					  }
					  ,end: function () {
						  var formDiv = document.getElementById('formDiv');
						  formDiv.style.display = '';
					  }
					});
	      	break;
	    	case 'delete':
	        	var data = checkStatus.data;
	        	var str = "";
	        	if(data.length==0){
	        		toastr.warning("请至少选择一条记录！");
	        	}
	        	for(var i=0;i<data.length;i++){
	        		str += data[i].rid;
	        		if(i != data.length-1){
	        			str += ",";
	        		}
	        	}
	        	$.ajax({
			    	type:'post',
			    	url:'${pageContext.request.contextPath }/roleMana/deleteRoleOfVerify.do',
			    	data:{"str":str},
			    	dataType : "json",
			    	success:function(data){
			    		if(data>-1){
			    			toastr.warning("该条数据正在使用中，请勿删除！");
			    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
								//关闭模态框
								// 父页面刷新
								/* window.location.reload();   */
							},2000);
			    		}else{
			    			layer.confirm('确定删除吗？', function(index){
			        			$.ajax({
					    			type:'post',
					    			url:'${pageContext.request.contextPath }/roleMana/deleteRole.do',
					    			data:{"str" : str},
					    			success:function(data){
					    				if(data>0){
					    					toastr.success("删除成功！");
					    					setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
												//关闭模态框
												// 父页面刷新
												window.location.reload();  
											},2000); 
					    				}else{
					    					toastr.error("删除失败！");
					    				}
					    			}
					   			});
			        		});
						}
		    		}
		   	 	});
	      	break;
	      	case 'select':
	      		console.log(obj)
	      	break;
	    };
	});
  
	//监听行工具事件
	table.on('tool(test)', function(obj){
		var data = obj.data;
		var rid = obj.data.rid;
		console.log(obj);
		if(obj.event === 'del'){
			$.ajax({
		    	type:'post',
		    	url:'${pageContext.request.contextPath }/roleMana/deleteRoleOfVerify.do',
		    	data:{"str":rid},
		    	dataType : "json",
		    	success:function(data){
		    		if(data>-1){
		    			toastr.warning("该条数据正在使用中，请勿删除！");
		    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							//关闭模态框
							// 父页面刷新
							/* window.location.reload();   */
						},2000);
		    		}else{
		    			layer.confirm('确定删除吗？', function(index){
		    			    $.ajax({
		    			    	type:'post',
		    			    	url:'${pageContext.request.contextPath }/roleMana/deleteRole.do',
		    			    	data:{"str":rid},
		    			    	dataType : "json",
		    			    	success:function(data){
		    			    		if(data>0){
		    			    			toastr.success("删除成功！");
		    			    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
		    								//关闭模态框
		    								// 父页面刷新
		    								window.location.reload();  
		    							},2000);
		    			    		}else{
		    			    			toastr.error("删除失败！");
		    			    		}
		    			    	}
		    			    		
		    			    })
		    			    layer.close(index);
		    			});
					}
	    		}
	   	 	});
		  
		} else if(obj.event === 'edit'){
			layer.open({
				  type: 1 		//Page层类型
				  ,area: ['500px', '300px'] //宽  高
				  ,title: '编辑'
				  ,shade: 0.1 	//遮罩透明度
				  ,maxmin: true //允许全屏最小化
				  ,anim: 1 		//0-6的动画形式，-1不开启
				  ,content: $('#formDiv')
				  ,success: function () {
					//回显表单数据
					for(var i=0;i<Object.entries(data).length;i++) {
						var id = '#' + Object.entries(data)[i][0];
						var text = Object.entries(data)[i][1];
						$(id).val(text);
					}
					form.render();
				  }	
				  ,end: function () {
				  	var formDiv = document.getElementById('formDiv');
				  	formDiv.style.display = '';
			  	  }
			});
		} else if(obj.event === 'accredit'){
			var rid = obj.data.rid;
			$("#rid").val(rid);
			layer.open({
				  type: 1 		//Page层类型
				  ,area: ['500px', '600px'] //宽  高
				  ,title: '角色授权'
				  ,shade: 0.6 	//遮罩透明度
				  ,maxmin: true //允许全屏最小化
				  ,anim: 1 		//0-6的动画形式，-1不开启
				 ,content:$("#formDiv2") 
			  	 ,success: function(data){
			  		successOther(laydate,data);
			  		form.render();
				}
				,end: function () {
				  	var formDiv = document.getElementById('formDiv2');
				  	formDiv.style.display = '';
			  	  }
			});
		} 
	});
	/**
     * 表单校验
     */
    form.verify({
    	//value：表单的值、item：表单的DOM对象
    	 name: function(value){
    		 var str = value.replace(/\s+/g,"");
    		 if(str == ''){
    			return '角色名称不能为空';
    		}
    	},
    });
    /**
     * 通用表单提交(AJAX方式)（新增）
     */
    form.on('submit(addform)', function (data) {
    	$("#submit").attr("disabled",true);
    	$.ajax({
   			url : '${pageContext.request.contextPath }/roleMana/saveRole.do',
   			data : $('#addform').serialize(),
   			type : "post",
   			dataType : "json",
   			}).done(
   				function(res) {
   					if (res > 0) {
   						if(res == 2){
   							toastr.success('新增成功！');
   						}
   						if(res == 3){
   							toastr.success('修改成功！');
   						}
   						setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
   							//关闭模态框
   							// 父页面刷新
   							window.location.reload();  
   						},2000);
   					}else{
   						toastr.warning('角色名称重复！');
   					}
   				}
   			).fail(
   				function(res) {
   					if(res == -2){
   						toastr.error('新增失败！');
   					}
   					if(res == -3){
   						toastr.error('修改失败！');
   					}
   				}
   			)
		return false;
    });
    
    /**
     * 通用表单提交(AJAX方式)授权
     */
    form.on('submit(subform)', function (data) {
    	$("#submit2").attr("disabled",true);
    	var ztree = getCheck("ztree");
    	//var formData = new FormData($('#formID')[0]);
		//formData.append("ztree", ztree);
		var rid = $('#rid').val();
    	$.ajax({
			url : '${pageContext.request.contextPath}/roleMana/accreditRole.do',
			type : "post",
			data : {"rid":rid, "ztree":ztree},
			async: false,
			//cache : false,0
			//processData : false,
			//contentType : false,
			dataType : "json",
			success: function (data) {
				if (data > 0) {
					toastr.success('授权成功');
					setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
						window.location.reload();  
						$("#reset").click();
					},1000);
				} else {
					toastr.error('授权失败');
				}
			},
			 }).done(
				function(res) {
					if (res == 1) {
						toastrStyle();
						toastr.success('授权成功！');
					}
					$("#reset").click();
				}
			).fail(
				function(res) {
					toastrStyle();
					toastr.error('授权失败！');
				}
			) 
			return false;
    });
    
});

//日期格式化
function timestampToTime(timestamp) {
	if (timestamp == null) {
		return '';
	} else {
		var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		Y = date.getFullYear() + '-';
		M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		D = (date.getDate()+1 < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
		return Y+M+D;
	}
}

$(document).on('click', '#clear', function() {
	//layer.msg('响应点击事件');
	// 清空全部选中的节点
	var treeObj = $.fn.zTree.getZTreeObj("ztree");
	treeObj.checkAllNodes(false)
});

function editValue(){
	$("#submit").attr("disabled",false);
}

toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上

</script>


<script type="text/javascript">
var setting = {
	    data:{//表示tree的数据格式
	        simpleData:{
	            enable:true,//表示使用简单数据模式
	            idKey:"id",//设置之后id为在简单数据模式中的父子节点关联的桥梁
	            pidKey:"pId",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应
	            rootId:"null"//pid为null的表示根节点
	        }
	    },
	    view:{//表示tree的显示状态
	        selectMulti:false//表示禁止多选
	    },
	    check:{//表示tree的节点在点击时的相关设置
	        enable:true,//是否显示radio/checkbox
	        chkStyle:"checkbox",//值为checkbox或者radio表示
	        checkboxType:{p:"",s:""},//表示父子节点的联动效果
	        radioType:"level"//设置tree的分组
	    }, 
	    /* callback:{//表示tree的一些事件处理函数
	        onClick:handlerClick,
	    } */
	}
/* 弹出框后加载信息 */
function successOther(laydate,data){
	ztree(data);
}
function ztree(data){	
	//第一步，先获取所有的权限信息，用树结构进行展示
	var treeData = [];
	 $.ajax({
	  type: "post",
	  url: "${pageContext.request.contextPath }/roleMana/getAllPermission.do",
	  dataType: 'JSON',
	  async: false,
	  success: function (arr) {
	      for(var i=0;i<arr.length;i++){
	      	//如果是一级菜单（pid == 0）
	    	  if(arr[i].pid == 0){
	      		var childrens = [];
	      		for(var j=0;j<arr.length;j++){
			        //如果是二级菜单（二级菜单的pid==一级菜单的id）	
	      			if(arr[j].pid == arr[i].id ){
			        		childrens.push({id:arr[j].id,name:arr[j].name,pId:arr[j].pid});
			        	} 
	      		}
	      		treeData.push({id:arr[i].id,name:arr[i].name,pId:null,children:childrens});
	      	 } 
	      }
		  	$.fn.zTree.init($("#ztree"),setting,treeData);
	  },
	error : function(msg) {
	    alert('树加载异常!');
	}
	
	});
	// 第二步，根据要授权的角色的ID，获取它已有的权限
	 if(data != null && data != ""){
		 var rid = $('#rid').val();
		//alert(rid);
		  $.ajax({
            type: "post",
            data: {"rid":rid},
            url: "${pageContext.request.contextPath }/roleMana/getPermissionByRole.do",
            dataType: 'JSON',
            async: false,
            success: function (arr) { 
		        for(var i=0;i<arr.length;i++){ 
		            var treeObj = $("#ztree");
					zTree_Menu = $.fn.zTree.getZTreeObj("ztree");
					//第三步，如果权限树的id, 和角色已有权限的id一样，在权限树的节点上勾选
					var node = zTree_Menu.getNodeByParam("id",arr[i].id);
					zTree_Menu.checkNode(node,true);//指定选中ID的节点
					zTree_Menu.expandNode(node, true, false);//指定选中ID节点展开
		      	} 
         	}
		}); 
	} 
}
function getCheck(id){
	//在提交表单之前，使用ztree提供的方式获取选中的节点
    var treeObj = $.fn.zTree.getZTreeObj(id);//获得ztree对象
    var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
    var array = new Array();
    for(var i=0;i<nodes.length;i++){
        var id = nodes[i].id;
        array.push(id);
    }
    var ids = array.join(",");
    return ids;
}

</script>

</body>
</html>
